<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>审核表</title>
    <link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
    <script src="/webjars/vue/2.6.14/dist/vue.js"></script>
    <script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
    <script src="/webjars/axios/1.6.2/dist/axios.js"></script>
</head>
<body>
<style>
    body{
        background-color: white;
    }
</style>
<style>
    body {
        background-color: white;
    }

    .el-select .el-input {
        width: 345px;
    }

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }

    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }


    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .container {
        overflow-x: hidden;
    }

    .date {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<div id="check">
    <template>
        <el-container>
            <el-header style="height: 30%">
                <template>
                    <div class="date">
                        <el-date-picker
                                v-model="searchdate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                @change="allot">
                        </el-date-picker>
                        <el-button icon="el-icon-search" @click="search" circle style="margin-left: 10px">查询
                        </el-button>
                    </div>
                </template>
            </el-header>
            <el-main style="height: 40%">
                <template>
                    <el-table :data="purList.data" border style="width: 100%">
                        <el-table-column prop="checkId" label="编号" width="50"></el-table-column>
                        <el-table-column prop="checkName" label="零件名称" width="100"></el-table-column>
                        <el-table-column prop="checkPrice" label="单价" width="100"></el-table-column>
                        <el-table-column prop="checkNumber" label="采购数量"></el-table-column>
                        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
                        <el-table-column prop="checkType" label="采购方式" width="110"></el-table-column>
                        <el-table-column prop="supname" label="公司名称"></el-table-column>
                        <el-table-column prop="checkTory" label="现有库存" width="110"></el-table-column>
                        <el-table-column prop="checkCount" label="总价" width="110"></el-table-column>
                        <el-table-column prop="purState" label="审核状态" width="110">
                            <template slot-scope="scope">
                    <span>
                        {{scope.row.purState == 1 ? '未通过' : '已通过'}}
                    </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="checkState" label="审核结果" width="110">
                            <template slot-scope="scope">
                    <span>
                        {{scope.row.checkState == 1 ? '待审核' : '已审核'}}
                    </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="purDate" label="审核时间"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <!-- 启用状态的编辑按钮 -->
                                <el-button
                                        v-if="scope.row.checkState == 1"
                                        @click="edit(scope.row)"
                                        size="small"
                                        type="success"
                                        icon="el-icon-check"
                                        circle>
                                </el-button>
                                <!-- 禁用状态的编辑按钮 -->
                                <el-button
                                        v-else
                                        size="small"
                                        type="success"
                                        icon="el-icon-check"
                                        disabled
                                        circle>
                                </el-button>
                                <!-- 启用状态的删除按钮（注意这里应该也有对应的函数处理点击事件） -->
                                <el-button
                                        v-if="scope.row.checkState == 1"
                                        @click="fail(scope.row)"
                                        size="small"
                                        type="danger"
                                        icon="el-icon-close"
                                        circle>
                                </el-button>
                                <!-- 禁用状态的删除按钮 -->
                                <el-button
                                        v-else
                                        size="small"
                                        type="danger"
                                        icon="el-icon-close"
                                        disabled
                                        circle>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-main>
        </el-container>

        <el-pagination
                :page-sizes="[3,5,9]"
                :current-page.sync="vo.pageNo"
                :page-size.sync="vo.pageSize"
                @current-change="search"
                @size-change="search"
                background
                layout="prev, pager, next,sizes"
                :total="purList.count">
        </el-pagination>
        <el-dialog
                title="提示"
                :visible.sync="reject"
                width="30%">
            <template>
                <span>
                <label>驳回原因</label>
                    <br/>
                <el-input v-model="che.purReject" placeholder="请输入内容"></el-input>
            </span>
            </template>
            <span slot="footer" class="dialog-footer">
    <el-button @click="reject = false">取 消</el-button>
    <el-button type="primary" @click="editapply">确 定</el-button>
  </span>
        </el-dialog>
    </template>
</div>

<script>
    new Vue({
        el: "#check",
        data: {
            searchdate: [],
            purList: [],
            reject: false,
            vo: {
                overdate: '',
                startdate: '',
                pageNo: 1,
                pageSize: 5
            },
            che: {
                checkId: '',
                checkName: '',
                checkNumber: '',
                checkSupp: '',
                purState:'',
                checkState:'',
                purReject:''
            }
        },
        methods: {
            search() {
                axios.get("/pur/searchcheck", {params: this.vo})
                    .then(({data}) => {
                        this.purList = data;
                    })
                this.searchdate='';
                this.vo.startdate='';
                this.vo.overdate=''
            },
            handleUpdateClick(){
              this.key+=1;
            },
            common(row) {
                this.che=row;
            },
            edit(row) {
                this.common(row);
                this.che.purState=0;
                this.che.checkState=0;
                this.che.purReject='审核通过,可以进行采购!';
                axios.put("/pur/editlist", this.che)
                    .then(({data}) => {
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                    })
            },
            fail(row) {
                this.common(row);
                this.reject = true;
            },
            editapply(){
                this.che.purState=0;
                this.che.checkState=0;
                axios.put("/pur/failedit",this.che)
                    .then(({data}) => {
                        console.log(data)
                        this.reject=false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                    })
            },
            //时间拆分
            allot() {
                this.vo.startdate = this.searchdate[0];
                this.vo.overdate = this.searchdate[1];
            }
        },
        mounted() {
            this.search();
        }
    })
</script>
</body>
</html>